<template>
    <div class="table-container">
        <div class="search-row" v-if="searchVisible || opsBtnVisible">
            <div class="left" v-if="title">
                <span>{{ title }}</span>
            </div>
            <div class="right" v-if="opsBtnVisible">
                <slot name="search" v-if="searchVisible">
                    <el-select v-model="filterText" placeholder="部门：全部" @change="handleFilterChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="filterText" placeholder="职称：全部" @change="handleFilterChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="filterText" placeholder="审批状态：全部" @change="handleFilterChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="filterText" placeholder="搜索姓名或工号" suffix-icon="el-icon-search" clearable
                        @input="handleFilterChange" />
                </slot>
                <slot name="buttons"></slot>
            </div>
        </div>

        <div class="table-wrap">
            <el-table :data="tableData" style="width: 100%" class="custom-table" :span-method="spanMethod" :cell-class-name="cellClassName"
                @selection-change="handleSelectionChange" height="100%">
                <el-table-column v-if="showCheckbox" type="selection" width="55" align="center"></el-table-column>

                <el-table-column v-if="showIndex" type="index" label="序号" width="80" align="center"></el-table-column>

                <template v-for="col in columns">
                    <el-table-column v-if="col.children" :prop="col.prop" :label="col.label" :width="col.width"
                        :key="col.prop">
                        <el-table-column v-for="child in col.children" :key="child.prop" :prop="child.prop"
                            :label="child.label" :width="child.width">
                            <template #default="scope">
                                <slot :name="col.prop" :row="scope.row">
                                    <span>{{ scope.row[col.prop] }}</span>
                                </slot>
                            </template>

                        </el-table-column>
                    </el-table-column>

                    <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width" :key="col.prop + 'a'" show-overflow-tooltip>
                        <template #default="scope">
                            <template v-if="col.prop === 'amount'">
                                <span>￥{{ scope.row[col.prop] }}</span>
                            </template>
                            <template v-else>
                                <slot :name="col.prop" :row="scope.row">
                                    <span>{{ scope.row[col.prop] }}</span>
                                </slot>
                            </template>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
        <div class="pagination-wrap" v-if="showPagination">
            <el-pagination :current-page="curPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
                layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <slot name="footer"></slot>
    </div>
</template>

<script setup>
import Icon from "@/components/common/Icon.vue";
import { ref, computed, defineProps, defineEmits, onMounted } from 'vue';
// import { getPinyinInitials } from '@/utils/util';

// 定义 props
const props = defineProps({
    tableData: {
        type: Array,
        default: () => [],
    },
    columns: {
        type: Array,
        default: () => [],
    },
    total: {
        type: Number,
        default: 100,
    },
    currentPage: {
        type: Number,
        default: 1,
    },
    pageSize: {
        type: Number,
        default: 10,
    },
    showAction: {
        type: Boolean,
        default: true,
    },
    showIndex: {
        type: Boolean,
        default: true,
    },
    showCheckbox: {
        type: Boolean,
        default: false,
    },
    showPagination: {
        type: Boolean,
        default: true,
    },
    searchVisible: {
        type: Boolean,
        default: true,
    },
    opsBtnVisible: {
        type: Boolean,
        default: true,
    },
    resultVisible: {
        type: Boolean,
        default: true,
    },
    spanMethod: {
        type: Function,
        default: () => { return undefined }  // 默认为不设置 spanMethod
    },
    title: {
        type: String,
        default: "",
    },
    titleIcon: {
        type: String,
        default: "icon-renyuan",
    },
    cellClassName:  {
        type: Function,
        default: () => { return null }
    },
});

// 定义 emits
const emits = defineEmits([
    'filter-change',
    'size-change',
    'current-change',
    'selectionChange',
    'update:currentPage'
]);

// 组件状态
const filterText = ref('');
const options = ref([
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' },
    { value: 'option3', label: '选项3' },
]);

// 计算属性
const curPage = computed({
    get() {
        return props.currentPage;
    },
    set(val) {
        emits('update:currentPage', val);
    }
});

// 方法
const handleFilterChange = (value) => {
    emits('filter-change', value);
};

const handleSelectionChange = (data) => {
    emits('selectionChange', data);
};

const handleSizeChange = (size) => {
    emits('size-change', size);
};

const handleCurrentChange = (page) => {
    emits('current-change', page);
};

const handleClick = (row, item) => {
    // const emitName = getPinyinInitials(item.text);
    // if (emits[emitName]) {
    //     emits(emitName, row);
    // } else if (item.text === '审批' || item.text === '审核') {
    //     // 注意：这里需要使用合适的方式显示确认对话框
    //     console.log(`是否${item.text}通过`);
    // }
};
</script>

<style lang="less" scoped>
// 样式保持不变，与原组件一致
.table-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .black-btn {
        width: 200px;
        background: #132241;
        color: #FFF;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 32px;
        border: 1px solid rgba(19, 34, 65, 0.10);
        font-size: 14px;
        cursor: pointer;
    }

        //上面的表头
    .search-row {
        flex-shrink: 1;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 8px;

        /deep/.el-select {
            width: 200px;
            height: 48px;

            .el-select__wrapper {
                border-radius: 16px;
                height: 100%;
                box-shadow: 0 0 0 1px rgba(41, 46, 61, 0.10) inset;
            }
        }

        /deep/.el-input {
            width: 320px;
        }

        .el-date-editor.el-input {
            width: 200px;
        }

        // /deep/.el-input__inner {
        //     border-radius: 32px !important;
        //     border: 1px solid rgba(19, 34, 65, 0.1) !important;
        //     background: #fff !important;
        // }

        /deep/.el-input__prefix {
            right: 20px;
            left: auto;
        }

        /deep/.el-date-editor .el-input__inner {
            padding-right: 20px;
        }

        .left {
            margin-bottom: 16px;
            display: flex;
            padding: 20px;
            align-items: center;
            box-sizing: border-box;
            font-weight: bold;
            font-size: 16px;
        }

        .right {
            display: flex;
            gap: 4px;
            margin-bottom: 16px;
            flex-shrink: 1;
        }

        .el-tooltip {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 32px;
            font-size: 14px;
            color: rgba(19, 34, 65, 0.50);

            &:not(.icon-info) {
                border: 1px solid rgba(19, 34, 65, 0.10);
            }
        }
    }

    .result-row {
        flex-shrink: 1;
        border-radius: 16px;
        background: rgba(41, 46, 61, 0.03);
        padding: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        :deep(span) {
            color: rgba(41, 46, 61, 0.5);
            font-size: 14px;
            font-weight: 400;
            line-height: 100%;         
            // .cor_blue {
            //     color: #0040FF;
            // }
           
        }


        // .blue {
        //     color: #427FFA;
        // }
    }

    .table-wrap {
        flex-grow: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: auto;   
          box-shadow:inset 0px 0px 16px 0px rgba(41,46,61,0.15);     
    }

    /deep/::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background: transparent;
    }

    /deep/::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        border-radius: 5px;
        border: 2px solid transparent;
        background-clip: content-box;
        transition: background-color 0.3s ease;
    }

    /deep/::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
        margin: 4px 0;
    }

    .pagination-wrap {
        flex-shrink: 1;  
        gap: 10px;
        // box-shadow: 0 3px 16px -3px rgba(0, 0, 0, 0.5);    
      .el-pagination {
        padding-top: 16px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        }
    }

    .custom-table {
        /deep/.el-table__cell {
            padding: 20px 0;
            width: 100%;
            border: 0px;
        }
        /deep/.el-table__header {
            overflow: hidden;
            border-radius: 16px;
            
        }
        /deep/.el-table__header th{
            background-color: #24223408 !important;
            color: gray;
            
        }
        /deep/th.el-table__cell {
            .cell {
                // color: rgba(41, 46, 61, 0.50);
                font-weight: normal;
            }
        }

        .el-table__header th {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

        }
        /deep/ .el-table__header {
            background-color: #24223408 !important;
            color: gray
        }
        /* 如果需要在超出时显示滚动条，可以增加这个样式 */
        .el-table__body {
            overflow-x: auto;
            /* 允许横向滚动 */
        }

        // 单元格内容溢出显示省略号
        /deep/.el-table__body .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        // margin: 20px 0;
        /deep/.el-button.red {
            color: #d54941;
        }

        /deep/ .el-table-column--selection .el-checkbox__inner {
            border-radius: 50%;
        }

        /deep/ .el-table__header-wrapper .el-table-column--selection .el-checkbox__inner {
            border-radius: 4px; 
        }
    }  
    
   
}
</style>